<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入全局样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入jq文件-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!--导入核心boostrap的js文件-->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<!--<form>
    用户名:<input type="text" />
</form>-->
<h3>基本表单实例</h3>
<!--

-->
<form>
    <!--
        表单里面样式
                class="form-group"  :让label和input标签或者下列菜单进行更好的排列
                labe元素:指定输入要输入的内容
                class="form-control" 在input或者下列菜单select/textarea 使用居多,让当前视图占width1 00%

    -->
<div class="form-group">
    <label for="email">用户名</label>
    <input type="email" class="form-control" id="email" placeholder="请输入用户名">
</div>
<div class="form-group">
    <label for="pwd">Password</label>
    <input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<div class="form-group">
    <label for="file">上传文件</label>
    <input type="file" id="file">
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> remember me
    </label>
</div>
<!--和input标签 type="submit"-->
    <!--class="btn默认按钮样式"-->
    <input type="submit" class="btn-success" value="登录"  />
</form>

<hr/>

<!--内联表单样式-->
<!--
    form-inline :让表单内容其内容左对齐
-->
<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">模糊查询用户名</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入用户名包含的内容">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">模糊查询邮箱</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱包含的内容">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<hr/>

<h3>水平排列表单</h3>
<!--
    class="form-horizontal":将label元素以及input进行水平布局
-->
<form class="form-horizontal">
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10"> <!--针对小屏幕:平板进行适配-->
            <input type="email"  id="username" placeholder="请输入用户名">
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" id="password" placeholder="请输入密码">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>
</body>
</html>